<template>
  <div class="common-layout">
    <el-container class="container">
      <el-aside style="width: 200px; margin-top: 20px">
        <!-- <switch></switch> -->
        <SideMenu @indexSelect="listByCategory" ref="sideMenu"></SideMenu>
      </el-aside>
      <el-main>
        <books class="books-area" ref="booksArea"></books>
        <!-- <ElementUi></ElementUi> -->
      </el-main>
      <hr />
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>
  <script>
import SideMenu from "../qiantai/SideMenu.vue";
import Books from "../qiantai/Books.vue";
export default {
  name: "BookPage",
  data() {
    return {};
  },
  methods: {
    listByCategory() {
      var cid = this.$refs.sideMenu.cid;
      var data = new FormData();
      data.append("cid", cid);
      this.$axios.post("/category", data).then((resp) => {
        if (resp.status == 200) {
          this.$refs.booksArea.books = resp.data;
        }
      });
    },
  },
  components: { SideMenu, Books },
};
</script>
  <style scoped>
.common-layout {
  /* position: absolute; */
  /* margin-top: 7.0%; */
  width: 100%;
  display: block;
  /* margin-left: 70px; */
  background-image: url("../../assets/5.jpg");
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.books-area {
  width: 990px;
  margin-left: auto;
  margin-right: auto;
}
.el-main {
  margin-left: 10%;
}
.el-container.is-vertical {
  flex-direction: column;
  height: 89%;
}
</style>